<template>
  <div>
    <van-nav-bar title="快递单评价" left-arrow @click-left="onleftClick">
      <template #right>
        <img src="../assets/images/首页按钮.png" alt="" width="50%" />
      </template>
    </van-nav-bar>

    <div class="total">
      <h4>总体评分</h4>

      <p>
        <span>{{ expressDetail.totalScore }}</span
        >分
      </p>
      <van-rate v-model="expressDetail.totalScore" icon="smile" void-icon="smile-o" />
    </div>
    <div class="rote">
      <h2>店铺评分</h2>

      <div class="title-bottom">
        <ul>
          <li>
            <div>店铺评分</div>
            <van-rate
              v-model="expressDetail.shop"
              :size="30"
              color="#ffcf60"
              void-icon="star"
              void-color="#eee"
               readonly
            />
          </li>
          <li>
            <div>物流速度</div>
            <van-rate
              v-model="expressDetail.logistics"
              :size="30"
              color="#ff8d5b"
              void-icon="star"
              void-color="#eee"
               readonly
            />
          </li>
          <li>
            <div>快递评分</div>
            <van-rate
              v-model="expressDetail.express"
              :size="30"
              color="#ff5d5e"
              void-icon="star"
              void-color="#eee"
               readonly
            />
          </li>
        </ul>
      </div>
    </div>

    <div class="upfile">
      <textarea
        name=""
        id=""
        cols="30"
        rows="5"
        v-model="expressDetail.info"
        placeholder="此用户没有填写评价"
      >
      </textarea>
      <div class="da">
        <div v-for="(item,index) in expressDetail.imgs" :key="index" class="imgs">
          <img :src="item" alt="" @click="imgPreview(index)"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exmatedetail } from "../request/api";
import { ImagePreview } from 'vant';
export default {
  data() {
    return {
      expressDetail:[],
      imgs: "",

    };
  },
  components:{
     [ImagePreview.Component.name]: ImagePreview.Component,
  },
  methods: {
    onleftClick() {
      this.$router.push("/express");
    },

    imgPreview(index){
      exmatedetail({
        id:this.$route.query.item.id
      }).then(res=>{
        this.imgs = res.data.imgs
      })
       ImagePreview({
        images: [
             this.imgs[0],
             this.imgs[1],
             this.imgs[2]
        ],
        startPosition: index,
        closeable: true,
      });
    }
  },
  created() {
    // console.log(this.$route.query.item.id);
    exmatedetail({
      id: this.$route.query.item.id,
    }).then((res) => {
      // console.log(res);
      this.expressDetail=res.data
      // console.log(this.expressDetail);

    });
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}
/deep/.van-rate__icon--full {
  color: orange;
}
/deep/.van-rate__icon {
  font-size: 50px;
}
.total {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #efefef;
  h4 {
    font-size: 18px;
    color: #666;
  }

  p {
    color: #ffcc33;
    margin: 10px 0;
    span {
      font-size: 50px;
      margin-right: 5px;
    }
  }

  .phone {
    display: flex;
    justify-content: space-between;
    img {
      width: 12%;
    }
  }
}

.rote {
  background-color: #fff;
  padding: 20px;

  .title-bottom {
    background-color: #fff;
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 20px;
        div {
          margin-right: 20px;
        }
      }
    }
  }
}

.upfile {
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;

  textarea {
    border: 0;
  }

  .da {
    display: flex;
    justify-content: space-between;
   
    width: 100%;
     img {
    width: 90px;
    height: 80px;
    
  }
  }
 
}
</style>